<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-10-23 14:38:51
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-10-31 11:38:36
 * @FilePath: \v9\src\views\global\delivery\components\RightCard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="rightCard">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">基础配置</el-menu-item>
      <el-menu-item index="2">数据设置</el-menu-item>
    </el-menu>

    <div class="rightCard-first flex-column-start" v-show="activeIndex == 1">
      <el-form ref="form" :model="page" label-width="100px">
        <!-- 顶部标题 -->
        <div class="rightCard-first-name">
          <el-form-item label="标题设置" class="title"></el-form-item>
          <el-form-item label="顶部标题名称:">
            <el-input v-model="page.headerTitle" placeholder="请输入标题名称" clearable></el-input>
          </el-form-item>
          <FontSet class="myFontSet" :fontset="pageFontSet" @getdata="data => getFontData(data, 'title')" :fontOptions='fontOptions'></FontSet>
        </div>
        <!-- 用户选择 -->
        <div class="rightCard-first-name flex-column-start" v-if="change_user == 1">
          <el-form-item label="用户选择" class="title"> </el-form-item>
          <div class="item-main page">
            <ul>
              <li class="user_tags_box">
                <el-tag size="medium" v-for="tag in user_tags" :key="tag.id" closable @close="handleCloseTag(tag, 1)"
                  type="success">
                  {{ tag.nickname }}
                </el-tag>
                <div class="more" @click="more_user = !more_user" v-show="more_user_tags.length">
                  <span>更多</span>
                  <i :class="[{ on: more_user }, ' el-icon-arrow-down']"></i>
                </div>
              </li>
              <el-collapse-transition>
                <div v-if="more_user">
                  <li class="more_user_box">
                    <el-tag size="medium" v-for="tag in more_user_tags" :key="tag.id" closable
                      @close="handleCloseTag(tag, 2)" type="success">
                      {{ tag.nickname }}
                    </el-tag>
                  </li>
                </div>
              </el-collapse-transition>
              <li>
                <el-button type="primary" @click="openSeleteDia">筛选用户</el-button>
              </li>
              <li>
                <span class="page-item-title wid70">模板备注:</span>
                <div class="page-item-content">
                  <el-input placeholder="请输入备注" v-model.trim="remark"></el-input>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 折扣率设置 -->
        <div class="rightCard-first-name item" v-if="tem_id==9">
          <el-form-item label="折扣率设置" class="title"></el-form-item>
          <el-form-item label="全商品折扣:">
            <el-input v-model="goods_discount" placeholder="请输入折扣率"></el-input>
          </el-form-item>
        </div>
        <!-- 打印设置 -->
        <div class="rightCard-first-name flex-column-start">
          <el-form-item label="打印设置" class="title"> </el-form-item>
          <el-form-item label="每页显示行数:">
            <el-input placeholder="请输入每页显示行数" v-model="printSetting.lineNumber" clearable type="number" min="1">
            </el-input>
          </el-form-item>
          <el-form-item label="表格每行高度:">
            <el-input placeholder="请输入表格每行高度" v-model="printSetting.tableTrHeight" clearable type="number" min="25">
            </el-input>
          </el-form-item>
          <div class="grid-around">
            <div class="page_header_box">
              <span class="page-item-title">
                <span class="section-title">打印预览</span>
                <el-tooltip class="item" effect="dark" content="默认关闭，开启后每次打印则会先预览样式。" placement="top-start">
                  <i class="el-icon-question"></i>:
                </el-tooltip>
              </span>
              <div class="page-item-content">
                <el-checkbox v-model="printSetting.isShow"></el-checkbox>
              </div>
            </div>
            <div class="page_header_box">
              <span class="page-item-title">
                <span class="section-title">分页表头</span>
                <el-tooltip class="item" effect="dark" content="默认关闭，开启后则会按分页显示表头，开启双排打印每页显示行数除2" placement="top-start">
                  <i class="el-icon-question"></i>:
                </el-tooltip>
              </span>
              <div class="page-item-content">
                <el-checkbox @change="pageSel" v-model="printSetting.showPageHeader"></el-checkbox>
              </div>
            </div>
            <div class="page_header_box" v-if="TotalbyCategory">
              <span class="page-item-title">
                <span class="section-title">分类统计</span>
                <el-tooltip class="item" effect="dark" content="默认关闭，开启后每次打印则会按商品分类合计。" placement="top-start">
                  <i class="el-icon-question"></i>:
                </el-tooltip>
              </span>
              <div class="page-item-content">
                <el-checkbox v-model="printSetting.is_category"></el-checkbox>
              </div>
            </div>
            <div class="page_header_box" v-if="TotalbyCategory">
              <span class="page-item-title">
                <span class="section-title">旋转90度</span>
                <el-tooltip class="item" effect="dark" content="默认关闭，开启后每次打印内容会旋转90度。" placement="top-start">
                  <i class="el-icon-question"></i>:
                </el-tooltip>
              </span>
              <div class="page-item-content">
                <el-checkbox @change="changeIsLeftTurn90($event)" v-model="printSetting.isLeftTurn90"></el-checkbox>
              </div>
            </div>
            <div class="page_header_box" v-if="TotalbyCategory">
              <span class="page-item-title">
                <span class="section-title">双排打印</span>
                <el-tooltip class="item" effect="dark" content="默认关闭，开启后商品信息会开启双排打印。开启分类统计双排打印会失效" placement="top-start">
                  <i class="el-icon-question"></i>:
                </el-tooltip>
              </span>
              <div class="page-item-content">
                <el-checkbox v-model="printSetting.doublePrinting" true-label="1" false-label="0"></el-checkbox>
              </div>
            </div>
          </div>
        </div>
        <!-- 纸张设置 -->
        <div class="rightCard-first-name flex-column-start">
          <el-form-item label="纸张设置" class="title"> </el-form-item>
          <el-form-item label="纸张类型">
            <el-select clearable v-model="page.paper" placeholder="请选择纸张类型" @change="changePagePaper">
              <el-option v-for="(item, index) in paperList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="纸张大小">
            <div class="flex-row-start">
              <el-input class="paperDom" placeholder="宽度" v-model="page.width" clearable
                @change="changePageData('--width')">
              </el-input>
              <span style="margin: 0 10px">*</span>
              <el-input class="paperDom" placeholder="高度" v-model="page.height" clearable
                @change="changePageData('--height')">
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="纸张边距">
            <div class="flex-row-start">
              <el-input class="paperDom" placeholder="上边距" v-model="printSetting.topMargin" clearable>
              </el-input>
              <span style="margin: 0 10px">*</span>
              <el-input class="paperDom" placeholder="左边距" v-model="printSetting.leftMargin" clearable>
              </el-input>
            </div>
          </el-form-item>
        </div>
        <!-- 每页打印信息 -->
        <!-- <div class="rightCard-first-name flex-column-start">
          <el-form-item label="每页打印信息" class="title"> </el-form-item>
          <el-checkbox-group v-model="page.checkList">
            <el-checkbox
              v-for="(item, index) in printInfo"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-checkbox>
          </el-checkbox-group>
          <el-form-item label="自定义文字">
            <el-input placeholder="请输入自定义内容" v-model="page.custom">
              <template slot="append"><span class="add">添加</span></template>
            </el-input>
          </el-form-item>
        </div> -->
      </el-form>
    </div>
    <div class="rightCard-second flex-column-start" v-show="activeIndex == 2">
      <el-form ref="form" :model="dataForm" label-width="80px">
        <!-- <div class="rightCard-second-search">
          <el-form-item label="搜索：">
            <el-input v-model="dataForm.search" placeholder="请输入字段名称">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </div> -->

        <div class="rightCard-second-box">
          <div v-for="(item, index) in list" :key="index">
            <div class="classA flex-row-between" @click="expandHide(item)">
              <span class="classA-title">{{ item.name }}</span>
              <img :src="item.state ? iconDown : iconRight" class="classA-img" />
            </div>

            <div class="classACard" v-if="item.state" :style="getListLength">
              <div class="classB" v-for="(items, indexs) in item.children" :key="indexs">
                <div class="classB-box flex-row-between" v-if="items.isCustom">
                  <div class="flex-row-start" style="align-items: center">
                    <el-checkbox v-model="items.check" @change="changeCheck(items)"></el-checkbox>
                    <span class="classB-box-title ellipsis" :title="items.byName ? items.byName : items.name">{{ items.byName ? items.byName : items.name }}</span>
                  </div>
                  <el-input class="classB-box-input" size="mini" clearable v-model="items.byName" :disabled="!items.check"
                    :placeholder="items.name" @change="changeInput(items, indexs, $event)"></el-input>
                    <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="del(items,indexs)"
                      style="position: absolute;right: 0;transform: translate(130%,-50%);top: 50%;z-index: 3;"
                    >
                      <i class="el-icon-delete" slot="reference"></i>
                    </el-popconfirm>
                </div>
                <div class="classB-box flex-row-between" v-else>
                  <div class="flex-row-start" style="align-items: center">
                    <el-checkbox v-model="items.check" @change="changeCheck(items)"></el-checkbox>
                    <span class="classB-box-title ellipsis" :title="items.byName ? items.byName : items.name">{{ items.name }}</span>
                  </div>
                  <el-input class="classB-box-input" size="mini" clearable v-model="items.byName" :disabled="!items.check"
                    :placeholder="items.name" @change="changeInput(items, indexs, $event)"></el-input>
                </div>
              </div>
              <el-input v-model="dataForm.search" placeholder="添加自定义空列" clearable>
                <el-button slot="append" icon="el-icon-edit" @click="addForm(item)">添加</el-button>
              </el-input>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog title="筛选用户" :visible.sync="dialogVisible" width="1000px">
      <select-user ref="selectUser" :tem_id="tem_id" @get_user="get_user" :is_new="1"></select-user>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  paperList,
  columns,
  determineList,
  kilogram,
  classification,
  fillList,
  printInfo,
} from "../configuration";
// 筛选用户
import SelectUser from "@/views/global/print_order/components/SelectUser.vue";
// 局部字体设置组件
import FontSet from "@/components/FontSet/FontSet";
import { get_order_print, getBaseTemplate } from "@/api/global/globalNewPrint";
import { packApi } from "@/utils/public";
export default {
  components: { SelectUser, FontSet },
  data() {
    return {
      // 纸张类型数组
      paperList,
      activeIndex: "2",
      list: [],
      // 打印样式
      printStyle: [
        {
          id: 1,
          name: "默认样式",
        },
      ],
      // 打印列数
      columns,
      // 是否显示边框
      determineList,
      // 公斤打印下拉框
      kilogram,
      // 按分类打印
      classification,
      // 紫红填充剩余行数
      fillList,
      // 每页打印信息
      printInfo,
      // 纸张设置
      page: {
        width: 210,
        height: 297,
        paper: 4,
        templateType: "3", //模板类型
        headerTitle: "配送单",
        topMargin: 60,
        bottomMargin: 30,
        userDefind: "1", //1.单排自定义，2.双排固定
      },
      // 打印设置
      printSetting: {
        lineNumber: 10,
        tableTrHeight: 25,
        topMargin: 0,
        leftMargin: 0,
        isShow: true,
        is_category: false,
        showPageHeader: false,
        doublePrinting: "0", //单排还是双排
        isLeftTurn90: false
      },
      pageFontSet: {
        fontSize: "20",
        bold: false,
        underline: false,
        italic: false,
        textAlign: "left"
      },
      // 数据设置表单
      dataForm: {
        search: null,
      },
      // 下箭头图标
      iconDown: require("../image/down.png"),
      // 右箭头图标
      iconRight: require("../image/right.png"),
      // 左箭头图标
      iconLeft: require("../image/left.png"),
      // 上箭头图标
      iconUp: require("../image/up.png"),
      // 筛选用户
      user_tags: [],
      more_user_tags: [],
      more_user: false,
      // 模版备注
      remark: "",
      change_user: this.$route.query.change_user, //1  为选择用户  空则不选择用户
      // 选择用户弹窗
      dialogVisible: false,
      tem_id: this.$route.query.tem_id,
      tem_name: '',
      goods_discount: "", // 折扣率
    };
  },
  computed: {
    getListLength() {
      return {
        "--listLength": this.list.length,
      };
    },
    // 纸张字体大小
    fontOptions() {
      let arr = []
      for (let index = 20; index < 41; index++) {
        arr.push(index)
      }
      return arr
    },
  },
  watch: {
    tem_id: {
      handler(val) {
        if (val == 9) {
          this.TotalbyCategory = true;
        }
      },
      immediate: true
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      const id = this.$route.query.id;
      const isEdit = id != null; // 判断是否为编辑模式（id 是否存在）
      const params = isEdit ? { id, is_new: 1 } : { tem_id: this.tem_id, is_new: 1 };
      const requestFunction = isEdit ? get_order_print : getBaseTemplate;
      requestFunction(packApi(params)).then(res=> {
        // 根据是否编辑，从返回的响应中获取数据
        let data = isEdit ? res.list : res.info;
        // 设置模板名称
        this.tem_name = data.tem_name;
        // 如果是编辑模式，进一步处理成员相关数据
        if(isEdit) {
          this.goods_discount = data.goods_discount;
          this.remark = data.remark;
          // this.$route.query.copy 如果是复制进来的不赋值
          if (this.change_user == 1 && data.member_ids && data.members.length && !this.$route.query.copy) {
            let array_group = this.array_group(data.members, 10);
            if (array_group.length > 0) {
              this.user_tags = array_group[0];
            }
            if (array_group.length == 2) {
              this.more_user_tags = array_group[1];
            }
          }
        }
        if(this.$route.query.copy) this.$route.query.id = null;
        this.list = JSON.parse(data.data_source_list)
        this.list.forEach(item => {
          item.children.forEach(itm => {
            this.$set(itm, 'type', item.type);
          });
        });
        // 解析打印设置，并设置相关的属性
        let printSettings = JSON.parse(data.print_settings);
        this.page = printSettings.page;
        this.$emit('changePageData', {
          "--width": printSettings.page.width,
          "--height": printSettings.page.height,
        }); // 通知父组件更新数据
        this.printSetting = printSettings.printSetting;
        this.pageFontSet = printSettings.fontset;
        // 父组件数据
        let tempString = JSON.parse(data.main_settings);
        this.$emit("getList", tempString);
      });
    },
    // 修改旋转90状态
    changeIsLeftTurn90(e) {
      this.page.paper = e ? 2 : 4;
    },
    // 获取fontSET子组件数据
    getFontData(data, type) {
      switch (type) {
        case "order":
          this.orderFontSet = data;
          break;
        case "goods":
          this.goodsFontSet = data;
          break;
        case "count":
          this.countFontSet = data;
          break;
        case "sign":
          this.signFontSet = data;
          break;
        case "title":
          this.pageFontSet = data;
          break;
      }
    },
    // 分页表头选择
    pageSel(val) {
       // 如果模板不是配送单模版，直接返回
      if(this.tem_id !== '9') return; 
      // 获取名称为 "合计信息" 的项的子项
      const { children } = this.list.find(item=> item.name === "合计信息");
      // 找到 "合计信息" 子项中每页合计的索引
      const childrenInfo = children.find(item=> item.id === 56);
      if (!val) {
        // 取消勾选每页合计项
        childrenInfo.check = false;
        this.changeCheck(childrenInfo);
      } else {
        // 每页合计项没有勾选，勾选该项
        if (!childrenInfo.check) {
          childrenInfo.check = true;
          this.changeCheck(childrenInfo);
        }
      }
    },
    // 删除用户选择
    handleCloseTag(tag, type) {
      switch (type) {
        case 1:
          this.user_tags.splice(this.user_tags.indexOf(tag), 1);
          break;
        case 2:
          this.more_user_tags.splice(this.more_user_tags.indexOf(tag), 1);
          break;
      }
    },
    // 打开选中用户弹框
    openSeleteDia() {
      this.dialogVisible = true;
    },
    get_user(data) {
      let oldarr = this.user_tags.concat(this.more_user_tags);
      let newarr = oldarr.concat(data);
      let user_tags_all = this._.uniqBy(newarr, "id");
      let array_group = this.array_group(user_tags_all, 10);
      if (array_group.length > 0) {
        this.user_tags = array_group[0];
      }
      if (array_group.length == 2) {
        this.more_user_tags = array_group[1];
      }
    },
    dialogConfirm() {
      if (
        this.$refs["selectUser"] &&
        this.$refs["selectUser"].selectUserArr.length > 0
      ) {
        let oldarr = this.user_tags.concat(this.more_user_tags)
        let newarr = oldarr.concat(this.$refs["selectUser"].selectUserArr);
        let user_tags_all = this._.uniqBy(newarr,"id");
        let array_group = this.array_group(user_tags_all, 10);
        if (array_group.length > 0) {
          this.user_tags = array_group[0];
        }
        if (array_group.length == 2) {
          this.more_user_tags = array_group[1];
        }
      }
      this.dialogVisible = false;
    },
    // 分组
    array_group(array, subGroupLength) {
      let arr1 = [];
      let arr2 = [];
      arr1 = array.slice(0, subGroupLength);
      arr2 = array.slice(subGroupLength);
      return [arr1, arr2];
    },
    handleSelect(event) {
      this.activeIndex = event;
    },
    // 一级表头展开和隐藏
    expandHide(item) {
      const shouldExpand = !item.state;  // 判断当前状态是否为展开
      // 只有在状态变化时才进行操作，避免无效更新
      if (shouldExpand) {
        this.list.forEach((e) => {
          this.$set(e, "state", false);
        });
      }
      this.$set(item, "state", shouldExpand);
    },
    // 添加自定义空列
    addForm(item) {
      // 判断是否有填写内容
      if (!this.dataForm.search) {
        this.$message.error("请输入对应内容!");
        return;
      }
      // 判断自定义的列明是否存在于当前列中
      let index = item.children.findIndex(
        (item) => item.name == this.dataForm.search
      );
      if (index != -1) {
        this.$message.error("已存在该列明!");
        return;
      }
      let data = {
        name: this.dataForm.search,
        type: item.children[0].type,
        check: true,
        byName: "",
        id: Math.floor(Math.random() * 1000) + 20,
        isCustom: true,
        index: item.children.length
      };
      let top = item.children[0].top;
      if (top) data.top = top
      item.children.push(data);
      this.dataForm.search = null;
      this.changeCheck(data);
    },
    /*
      勾选右侧信息时,中间的画布中出现对应内容
      如果模板ID为'9'（配送单模板），且当前项ID为56（每页合计），
      并且当前项被勾选时，如果未显示分页表头，则会取消勾选并提示用户必须配合分页表头使用。
    */
    changeCheck(item) {
      if(this.tem_id === '9' && item.id === 56) {
        if(!this.printSetting.showPageHeader && item.check) {
          item.check = false;
          this.$message.error("每页合计必须配合分页表头一起使用");
          return;
        } else if(this.printSetting.showPageHeader && !item.check) {
          this.printSetting.showPageHeader = false;
        }
      }
      let data = {
        name: item.byName ? item.byName : item.name,
        id: item.id,
        index: item.index,
        check: item.check,
        type: item.type,
        isCustom: item.isCustom,
      };
      item.top && (data.top = item.top);
      this.$emit("operate", data);
    },
    // 修改右侧信息文字时,中间的画布中也出现对应内容
    changeInput(item, index, $event) {
      let data = {
        // 原始标签
        name: item.name,
        id: item.id,
        index,
        check: item.check,
        // 修改后的标签
        newName: $event,
        type: "change",
      };
      this.$emit("operate", data);
    },
    // 键盘按下删除将check的值改变
    changeIdCheck(id) {
      this.list.forEach(item => {
        let info = item.children.find(itm => itm.id == id)
        info && (info.check = false)
      })
    },
    // 修改页面样式
    changePagePaper(val) {
      let info = this.paperList.find(item => item.id == val);
      this.page.width = info.width;
      this.page.height = info.height;
      this.$emit('changePageData', {
        "--width": info.width,
        "--height": info.height,
      }); // 通知父组件更新数据
    },
    changePageData(key) {
      if (key == '--width') {
        this.$emit('changePageData', { [key]: this.page.width })
      } else if (key == '--height') {
        this.$emit('changePageData', { [key]: this.page.height })
      }
    },
    // 删除
    del(info, index){
      info.check = false;
      this.changeCheck(info);
      this.list.forEach(item=>{
        item.children = item.children.filter(child=> child.id!=info.id);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rightCard {
  width: 100%;
  height: 100%;

  &-first {
    height: calc(100% - 65px);
    overflow-y: auto;

    &-name {
      border-bottom: 1px solid #e1e1e1;
      padding: 10px 0;

      .paperDom {
        width: 85px;
      }
    }
  }

  &-second {
    user-select: none;

    &-search {
      padding: 10px 0;
    }

    &-box {
      width: 100%;

      .classA {
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        align-items: center;
        background: #f1f1f3;
        margin-bottom: 5px;

        &-title {
          font-size: 14px;
          font-weight: 600;
        }

        &-img {
          width: 20px;
          height: 20px;
        }
      }

      .classACard {
        padding: 30px;
        width: 100%;
        max-height: calc(100vh - 66px - 60px - 60px - 60px * var(--listLength));
        overflow-y: auto;
        .classB {
          margin-bottom: 10px;
          position: relative;
          &-box {
            align-items: center;

            &-title {
              margin-left: 5px;
              font-size: 14px;
            }

            &-input {
              min-width: 130px;
              max-width: 130px;
            }
          }
        }
      }
    }
  }
}

/deep/.el-menu--horizontal>.el-menu-item {
  width: 50%;
  font-weight: 600;
  color: #000;
}

/deep/.el-menu--horizontal>.el-menu-item.is-active {
  color: #03a98e;
  border-bottom: 2px solid #03a98e;
}

/deep/.el-form-item {
  margin-bottom: 6px;
}

.title {
  font-weight: 600;
}

.custom {
  align-items: center;
}

/deep/.el-checkbox-group {
  padding: 0 20px;
}

/deep/.el-form-item__content .el-input-group {
  width: 194px;
}

.add:hover {
  cursor: pointer;
}

//用户筛选
.user_tags_box {
  display: flex;
  flex-wrap: wrap;

  .el-tag {
    display: block;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

.more {
  user-select: none;
  font-size: 12px;
  height: 28px;
  line-height: 26px;
  padding: 0 10px;
  margin-bottom: 10px;

  i {
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
    vertical-align: -1px;

    &.on {
      transform: rotate(180deg);
    }
  }

  &:hover {
    cursor: pointer;
  }
}

.more_user_box {
  display: flex;
  flex-wrap: wrap;

  .el-tag {
    display: block;
    margin-bottom: 10px;
    margin-right: 10px;
  }

  margin-top: 0 !important;
}

.page_header_box,
.input_box {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.page_header_box {
  margin-left: 10px;
}

.page-item-title {
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
  .section-title {
    display: inline-block;
    width: 60px;
  }
}

.page-item-content {
  flex: 1;
}

.font-set-box {
  padding-left: 10px;
  padding-top: 0;
  box-sizing: border-box;
  flex-wrap: wrap;

  /deep/ .font-set-title {
    font-size: 14px;
    color: #606266;
    margin-left: 15px;
  }

  /deep/ select {
    flex: 0.8;
  }

  /deep/ li span {
    margin-top: 5px;
  }
}

.page {
  padding: 0 20px;
  box-sizing: border-box;
  ul {
    margin-bottom: 15px;
    li {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
  }
}
.ellipsis {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wid70 {
  width: 70px;
}
.myFontSet {
  /deep/.font-set-title {
    margin-right: 5px;
  }
}

.grid-around {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: space-around;
}
</style>